import { For } from "solid-js";
import type { InputSize } from "@/components/Input";
import Input from "@/components/Input";
import Panel from "@/components/Panel";

const sizes: InputSize[] = ["sm", "md", "lg"];

export default function Inputs() {
  return (
    <Panel title="Inputs" class="bg-white">
      <div class="flex flex-col gap-4">
        <div class="flex gap-4 ">
          <For each={sizes}>{(size) => <Input size={size} placeholder={size} />}</For>
        </div>
      </div>
    </Panel>
  );
}
